import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// **** vuex 状态管理工具，负责数据的维护与修改，可以全局使用。
// 包括5大模块  state，getters，mutations，actions，modules
// 状态其实是指数据值的变化，一旦变化，其他页面使用该数据也一并变化
// 组件间的传值vuex 
// ？ 算组件之间的传值吗？
//算，因为组件之间也可以通过 vuex来获取数据
//不算，引他只是全局传递数据，数据进行存储，是状态管理工具


// 特点
// 1.响应式
// 2，不能直接改变store（容器）中的状态
export default new Vuex.Store({
  // state是做什么的呢： 是 定义数据字段的（初始值）
  state: {
    userInfo: {}, //( 初始值) 
    
  },
  // getters 是vuex 的计算属性 ，（和vue文件 当中的computed 用法一样）
  getters: {},
  // 是vuex 唯一改变state 值的地方
  mutations: {
    // 做一个区别。在项目当中，mutations 一般方法都会大写
    // 载荷： 就是额外的参数
    // n 代表额外参数，一般情况下是一个对象
    // 实质上任何在回调函数中进行的状态的改变都是不可追踪的
    // 不能使用异步函数
    // 辅助函数 mapMutations  
    // 调用方式 是this.$store.commit(USERINFO,值)
    USERINFO(state,n) {
      console.log(n,'----vuex---')
      state.userInfo = n;
      localStorage.setItem("userInfo",JSON.stringify(state.userInfo))
    }
  },
  // Action 提交的是 mutation，而不是直接变更状态。
  // Action 可以包含任意异步操作。
  // this.$store.dispatch("userInfoList")
  // 辅助函数 mapActions
  actions: {
    userInfoList(context) {
      // const {commit} = context
      console.log(context,45)
      // context.commit('USERINFO',{})
    }
  },
  modules: {
  }
})




// 应用场景
// 1，在中大型项目中可以使用vuex
// 2，比如在页面中两个组件，一个组件改变状态，同步另一个组件也改变，那么也可以用vuex
